<template>
  <div class="textPage">
    <el-card class="box-card">
      <el-form>
        <el-row>
          <el-col>
            <el-form-item label="学科:" prop="subject">
              <el-select placeholder="请选择" style="width: 40%"  v-model="Query.subject" @change="SelectionSubjects">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in DropdownList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="目录:" prop="creatorID">
              <el-select placeholder="请选择" style="width: 40%" v-model="Query.creatorID">
                 <el-option :label="item.label" :value="item.value" v-for="(item, index) in DirectoryList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="企业:" prop="shortName">
              <el-input v-model="Query.shortName"  style="width: 40%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="城市:">
              <el-select placeholder="请选择" v-model="Query.province" @change="SelectionProvinces">
                  <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"></el-option>
                </el-select>
             <el-select placeholder="请选择" v-model="Query.city">
                  <el-option :label="item" :value="item" v-for="(item, index) in citysList" :key="index"></el-option>
                </el-select></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="方向:" prop="direction">
              <el-select placeholder="请选择" v-model="Query.direction"> <el-option :label="item" :value="index" v-for="(item, index) in direction" :key="index"></el-option> </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="题型:">
              <el-radio-group v-model="radio1">
                <el-radio :label="3">单选</el-radio>
                <el-radio :label="6">多选</el-radio>
                <el-radio :label="9">简答</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="难度:">
              <el-radio-group v-model="radio2">
                <el-radio :label="3">简单</el-radio>
                <el-radio :label="6">一般</el-radio>
                <el-radio :label="9">困难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="题干:"></el-form-item>
            <quill-editor></quill-editor>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="选项:"> </el-form-item>
            <el-row>
              <el-radio-group>
                <el-row>
                  <el-col class="upload">
                    <el-radio>A:</el-radio>
                    <el-input style="width: 30%"></el-input>
                      <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                      </el-dialog>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="upload">
                    <el-radio>B:</el-radio>
                    <el-input style="width: 30%"></el-input>
                      <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                      </el-dialog>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="upload">
                    <el-radio>C:</el-radio>
                    <el-input style="width: 30%"></el-input>
                      <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                      </el-dialog>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col class="upload">
                    <el-radio>D:</el-radio>
                    <el-input style="width: 30%"></el-input>
                      <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                      </el-dialog>
                  </el-col>
                </el-row>
              </el-radio-group>
            </el-row>
            <el-button type="danger" disabled size="mini">+增加选项与答案</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="解析视频:">
              <el-input style="width: 40%" v-model="Query.videoURL"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="答案解析:"> </el-form-item>
            <quill-editor></quill-editor>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="题目备注:"></el-form-item>
            <el-input type="textarea" v-model="Query.remarks"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="试题标签:" prop="tags">
              <el-select placeholder="请选择" style="width: 40%" v-model="Query.tags">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in tagsList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button type="primary">确认提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/questions'
import { simple as simpledirectory } from '@/api/hmmm/directorys'
export default {
  name: 'textPage',
  components: {},
  props: {},
  data () {
    return {
      // 选项上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      basicsList: [],

      // 获取列表参数对象
      Query: {
        query: '',
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签
        province: null, // 省市
        city: null, // 地区
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 目录
        creator: null, // 录入人
        question: null,
        enterprise: null,
        videoURL: null
      },

      total: 0,
      currentPage: 1,
      DropdownList: [], // 学科列表
      DirectoryList: [], // 目录列表
      tagsList: [], // 标签列表
      difficulty: difficulty, // 难度
      questionType: questionType, // 题型
      direction: direction, // 方向
      UsersList: [],
      provinces: provinces(), // 省份
      citysList: [], // 地区
      queryDialogVisible: false, // 控制对话框的显示与隐藏
      queryForm: {}, // 查看题库对象
      options: [], // 所有题目的对应的选项，组装成一个对象数组
      enterprise: [],
      radio1: 3,
      radio2: 2
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList()
    this.DropdownSubject()
  },
  mounted () {},
  methods: {
    // 选项上传图片的方法
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 城市
    SelectionProvinces () {
      this.citysList = citys(this.Query.province)
    },
    async getList () {
      try {
        const { data } = await list(this.Query)
        console.log(data)
        this.basicsList = data.items
        this.page = data.page
        this.pagesize = data.pagesize
        this.total = data.counts
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 下拉菜单
    async DropdownSubject () {
      try {
        const { data } = await simple()
        this.DropdownList = data
        // console.log(data)
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    // 获取选中id的二级目录
    async SelectionSubjects (id) {
      try {
        const { data } = await simpledirectory({
          subjectID: id
        })
        this.DirectoryList = data
        this.SelectionTags(id)
      } catch (err) {
        console.log('请求失败', err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  height: auto;
  .el-form {
    margin-left: 50px;
  }
}
.el-row {
  height: auto;
  margin: 10px 0;
  .quill-editor {
    margin-bottom: 10px;
  }
}
.el-radio-group {
  width: 100%;
}
.upload {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>
